// 导入路由模块
import router, { asyncRoutes } from './router'
import store from './store'

import getPageTitle from '@/utils/get-page-title'

// 导入进度条以及样式
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 路由白名单
const whiteList = ['/login', '/404'] // no redirect whitelist

// 创建前置路由守卫
router.beforeEach(async(to, from, next) => {
  // 对当前页面的标题设置
  document.title = getPageTitle(to.meta.title)

  // 获取 token
  const token = store.state.user.token

  NProgress.start()

  // 判断 token 是否存在
  if (token) {
    if (to.path === '/login') {
      next('/')
    } else {
      // 获取用户信息的时机
      // 1.需要有 token
      // 2.需要在跳转页面之前
      // await store.dispatch('user/getUserInfo')

      // 动态路由的处理时机
      // 1.先获取到用户信息
      // 2.跳转之前

      // 思路：
      // 1.判断是否存在用户信息(已经将用户信息存到 Vuex 中了)
      if (!store.getters.userId) {
        // 2.如果没有用户信息,需要获取用户信息 ---> 用户的权限信息
        const menus = await store.dispatch('user/getUserInfo')

        // 3.根据后台返回的权限信息,从本地预置的 8 个路由里面筛选当前用户有权访问的路由
        const filerRoutes = asyncRoutes.filter(route => {
          // 获取到每一个路由规则的名称
          const routeName = route.children[0].name
          // 判断获取到的路由名称在不在 menus 权限信息中
          return menus.includes(routeName)
        })

        // 解决页面刷新 404 的问题,就是将通配符防止到筛选好的路由最后
        filerRoutes.push({ path: '*', redirect: '/404', hidden: true })

        // 4.使用 Vue-router 提供的 addRouters 方法,将筛选出来的路由动态添加到路由对象中
        // 通过 addRouters 动态添加的路由,是存到数组中的,并不会对 routes产生影响
        router.addRoutes(filerRoutes)

        // 5.左侧菜单是从 Vue-router 的 routes 获取的数据进行渲染,将左侧菜单数据获取方式进行调整(Vuex)
        store.commit('permission/setRoutes', filerRoutes)

        // 解决切换用户以后,新的用户访问不了一个用户菜单的情况
        // 获取当前用户的最终路由表,然后判断我们访问的路径在不在最终的路由表中
        const allPath = store.state.permission.routes.map(item => item.path)

        if (to.path === '/employees/detail') {
          next({
            path: to.fullPath
          })
        } else {
          next({
            path: allPath.includes(to.path) ? to.path : '/',
            replace: true// 会调用 router.replace 方法,清空之前的浏览历史,等于是重新进入路由
          })
        }
      }

      next()
    }
  } else {
    // 判断访问的路由在不在白名单
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
    }
  }
  // 手动强制关闭一次  为了解决 手动切换地址时  进度条的不关闭的问题
  NProgress.done()
})

// 后置路由守卫
router.afterEach((to, from) => {
  // 隐藏进度条效果
  NProgress.done()
})
